<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
</head>
<style>
    #outer{
        width: 500px;
        /* height: 500px; */
        background-color: orange;
        overflow: hidden;
    }

    #inner1{
        width:100px;
        height:100px;
        background-color: pink;
    }

    #inner2{
        width:100px;
        height:100px;
        background-color: gray;
        float:left;
    }
</style>
<body>
    <!-- 
        BFC（Block Formatting Context）块级格式上下文：
            BFC决定了元素如何对其内容进行定位，以及其他元素的关系和相互作用。
            当设计到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局，一个环境中的元素不会影响到其他环境中的布局


        BFC渲染规则：
            1. BFC元素垂直方向的边距会发生重叠，属于不同BFC外边距不会发生重叠
            2. BFC的区域不会与浮动元素的布局重叠
            3. BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素
            4. 计算BFC高度的时候 浮动元素也会参与计算（清除浮动）

        如何创建BFC
            1. overflow 不为visible
            2. float 不为none
            3. position 不为 static 或者 relative
            4. display 为 inline-blocks table table-cell table-caption flex inline-flex
     -->
     <div id="outer">
         <div id="inner1"></div>
         <div id="inner2"></div>
     </div>
</body>
</html>